<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body >
<style type="text/css">

</style>

<div>

    <div id="div5" class="text">
        <select id="contextType" onchange="loadValue();">
            <option value="5" selected="selected">外包服务</option>
            <option value="7">招贤纳士</option>
            <option value="8">联系我们</option>
            <option value="4">关于我们</option>
        </select>
    </div>

    <div style="padding: 5px 0; color: #ccc"></div>
    <div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
    </div>

    <button id="btn1">保存</button>
</div>`

<script src="/js/jquery-2.2.4.min.js" charset="utf-8">
</script>
<script type="text/javascript" src="/js/wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div2');
    editor.customConfig.pasteIgnoreImg = false;
    editor.customConfig.uploadImgShowBase64 = true;
    //    editor.customConfig.pasteTextHandle = function (content) {
    //        return content + '<p>在粘贴内容后面追加一行</p>'
    //    }

    editor.customConfig.uploadImgServer = '/upload';
    editor.customConfig.uploadFileName = 'file';

    editor.customConfig.menus = [
        'bold',  // 粗体
        'fontSize',  // 字号
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'code',  // 插入代码
        'link',  // 插入链接
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'undo'  // 撤销

    ]


    editor.customConfig.onfocus = function () {

    }

    editor.customConfig.onblur = function (html) {

    }

    editor.create();

    document.getElementById('btn1').addEventListener('click', function () {

        var context = editor.txt.html();
        $.ajax({
            url: '/bo/saveWaiBaoFuwu',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                context : context,
                valueType : $('#contextType').val()
            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 6},function () {});
                    return;
                }

                alert('保存成功');

                loadValue();
            }
        });

    }, false)


    function loadValue() {
        $.ajax({
            url: '/bo/loadKeyValueByType',
            type: 'GET', //GET
            async: true,    //或false,是否异步
            data: {
                valueType : $('#contextType').val()
            },
            timeout: 10000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            success: function (ajaxData, textStatus, jqXHR) {
                if (1000 != ajaxData.code) {
                    layer.alert(ajaxData.message, {icon: 6},function () {});
                    return;
                }

                if (!ajaxData.data) {
                    editor.txt.html(' ');
                    return;
                }
                if (ajaxData.data.valueText) {
                    editor.txt.html(ajaxData.data.valueText);
                }

            }
        });
    }

    loadValue();

</script>
</body>
</html>